<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn1">测试1</button>
    <button id="btn2">测试2</button>
    <label>单文件<input type="file" id="upll1"></label>
    <label>多文件<input type="file" id="upll2" multiple="multiple"></label>
    <textarea id="demo" rows="3" cols="20" style="display: block;width: 80%;height: 515px;"></textarea>
    <script>
        const jsonRPC = {
            _url: '/jsonrpc',
            _currentId: 0,
            pack(method, params) {
                this._currentId++;
                return { "jsonrpc": "2.0", method, params, id: this._currentId };
            },
            fetch(method, params) {
                let data;
                if (Array.isArray(method)) {
                    data = method.map(o => this.pack(o.method, o.params));
                } else if (typeof method == "object") {
                    data = this.pack(method.method, method.params);
                } else {
                    data = this.pack(method, params);
                }
                return fetch(this._url, {
                    headers: {
                        "Content-Type": "application/json"
                    },
                    method: 'POST',
                    body: JSON.stringify(data)
                }).then(v => {
                    return v.json();
                });
            },
            upload(method, params, files) {
                let formdata = new FormData();
                formdata.append('jsonrpc', "2.0");
                formdata.append('id', this._currentId++);
                formdata.append('method', method);
                formdata.append('params', JSON.stringify(typeof params == "object" ? params : [params]));
                if (files.constructor === FileList) {
                    for (let file of files) {
                        formdata.append('files', file);
                    }
                } else if (files.constructor === File) {
                    formdata.append('file', files);
                }
                return fetch(this._url, {
                    method: 'POST',
                    body: formdata
                }).then(v => {
                    return v.json();
                });
            }
        };
        document.getElementById("btn1").onclick = function () {
            jsonRPC.fetch("test2", [4, 2]).then(v => {
                document.querySelector("#demo").innerHTML = JSON.stringify(v, null, 2);
            });
        };
        document.getElementById("btn2").onclick = function () {
            jsonRPC.fetch([
                { "method": "test1", "params": [1, 2, 3, 4, 5] },
                { "method": "test2", "params": [1, 2, 3, 4, 5] },
                { "method": "test3", "params": [1, 2, 3, 4, 5] },
                { "method": "test", "params": { a: 1, b: 2, c: 3, d: 4, e: 5 } },
                { "method": "test1", "params": { a: 1, b: 2, c: 3, d: 4, e: 5 } },
                { "method": "test3", "params": { a: 1, b: 2, c: 3, d: 4, e: 5 } },
            ]).then(v => {
                document.querySelector("#demo").innerHTML = JSON.stringify(v, null, 2);
            });
        };
        document.getElementById("upll1").onchange = function () { 
            jsonRPC.upload('upload1', [1, 2, 3, 4, 5], this.files[0]).then(v => {
                document.querySelector("#demo").innerHTML = JSON.stringify(v, null, 2);
            });
        };
        document.getElementById("upll2").onchange = function () {
            let f = this.files;
            jsonRPC.upload('upload2', { a: 1, b: 2, c: 3 }, this.files).then(v => {
                document.querySelector("#demo").innerHTML = JSON.stringify(v, null, 2);
            });
        };

    </script>
</body>

</html>